vue 渲染问题

发表于

vue 渲染问题

image

数据变化触发render函数

vue相关API

数据类型

Array 列表渲染

  1. 添加和删除
1
2
3
4
5
6
list.push()
list.pop() 
list.splice(0) // 需要数组长度
list.splice(index,1) //删除
list.splice(index,1,newValue) // 替换
  1. 清空或者重置
1
2
3
4
list.splice(0) // 清空
this.$set(this,'list',[])

Object 数据渲染

  1. 添加属性
1
2
3
4
5
6
7
//Vue 不允许在已经创建的实例上动态添加新的根级响应式属性所以这种方法无法添加成为getter/setter的属性
//this.$set(this,'dataMap',{}) //清空
this.$set(this.dataMap,'key',value) //添加或者修改单个属性值 
this.dataMap = Object.assign({},this.dataMap, result) // 继承数据
this.$set(this,'dataMap',{})
this.dataMap = Object.assign({},this.dataMap, result) //重置数据

遇到问题

  1. max stack size exceeded
  • Object.assign 会拷贝Object原型链上的所有方法，使用浅拷贝数据JSON.parse(JSON.string())
  • 先使用$set置空，在使用 Object.assign
  • render中使用computed计算属性设置resultMap子组件中的数据也会导致该问题，采用$set置空，在使用 Object.assign 解决
  1. dataMap={key:undefined} render 中遇到父组件更新数据时无法保存
  • 原因Object中的key的value值设为了undefined